<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta charset="UTF-8">
		<!-- <script type="text/javascript" src="${path}/common/js/addr.js"></script> -->
		<script type="text/javascript" src="${path}/common/js/jquery-1.8.2.min.js"></script>
		<style type="text/css">
			body {
				font-family: "微软雅黑";
				font-size: 16px;
			}
			
			li {
				background-color: rgb(253, 253, 253);
			}
			
			.info p {
				color: #EE6A50;
			}
		</style>
		<title>我的地址</title>
		<script type="text/javascript">
				$(document).ready(function(){
					var item = null;
					set_tool_listenner();
					mui.init();
					$("#menu1").bind("tap", function() {
						delete_item();
					});
					$("#menu2").bind("tap", function() {
						update_addr();
					});
					function delete_item() {
						if (item != null) {
							$("li").eq(item).remove();
							set_tool_listenner();
						}
					};
					
					function set_tool_listenner() {
						var tool_list = document.getElementsByClassName("tool");
						var funny = function(i) {
							tool_list[i].onclick = function() {
								item = i ; 
								mui('.mui-popover').popover('toggle');
							}
						}
						for (var i = 0; i < tool_list.length; i++) {
							funny(i);
						}
					}
					
					function update_addr() {
						if (item != null) {
							window.location.href="./update_addr";
						}
					}
					
					$(".info").click(function(){
						var p = $(this).children("p");
						var name = p.eq(0).text();
						var phone = p.eq(1).text();
						var addr = p.eq(2).text();
						window.location.href = "./paijian?name="+name+"&phone="+phone+"&addr="+addr;
						//alert(p.eq(0).text());
						/* var form = $("<form method='post' action='./paijian'></form>");
						form.append("<input type='text' name='name' value='"+p.eq(0).text()+"'>");
						form.append("<input type='text' name='phone' value='"+p.eq(1).text()+"'>");
						form.append("<input type='text' name='addr' value='"+p.eq(2).text()+"'>"); */
						/* $.post("./paijian",
							{
								name: p.eq(0).text(),
								phone: p.eq(1).text(),
								addr: p.eq(2).text()
							}
						); */
						//alert(form.html());
						//form.submit();
						//window.location.href = "./paijian?name="+name+"&phone="+phone+"&addr="+addr;
					});
				});
			</script>
		<title></title>
	</head>
	<link rel="stylesheet" href="${path}/common/css/mui.min.css" />
	<script type="text/javascript" src="${path}/common/js/mui.min.js"></script>

	<body>
		<ul class="mui-table-view" id="list" class="itSem_div">
			<li style="padding-top: 5px;">
				<table border="0px" cellspacing="" cellpadding="" width="100%" style="margin-left: 10px; margin-bottom: 5px ;">
					<tr>
						<td style="width: 90%;" class="info">
							<p>张三</p>
							<p>152152367455</p>
							<p>2栋213</p>
						</td>
						<td width="20%">
							<a class="tool"> <img src="${path }/common/images/tool.png" width="60%" /> </a>
						</td>
					</tr>
				</table>
				<hr size="1px">
			</li>
			<li style="padding-top: 5px;">
				<table border="0px" cellspacing="" cellpadding="" width="100%" style="margin-left: 10px; margin-bottom: 5px ;">
					<tr>
						<td style="width: 90%;" class="info">
							<p>李四</p>
							<p>152152367455</p>
							<p>2栋213</p>
						</td>
						<td width="20%">
							<a class="tool"> <img src="${path }/common/images/tool.png" width="60%" /> </a>
						</td>
					</tr>
				</table>
				<hr size="1px">
			</li>
			<li style="padding-top: 5px;">
				<table border="0px" cellspacing="" cellpadding="" width="100%" style="margin-left: 10px; margin-bottom: 5px ;">
					<tr>
						<td style="width: 90%;" class="info">
							<p>王五</p>
							<p>152152367455</p>
							<p>2栋213</p>
						</td>
						<td width="20%">
							<a class="tool"> <img src="${path }/common/images/tool.png" width="60%" /> </a>
						</td>
					</tr>
				</table>
				<hr size="1px">
			</li>
			<c:if test="${not empty nametext }">
				<li style="padding-top: 5px;">
					<table border="0px" cellspacing="" cellpadding="" width="100%" style="margin-left: 10px; margin-bottom: 5px ;">
						<tr>
							<td style="width: 90%;" class="info">
								<p>${nametext }</p>
								<p>${phonetext }</p>
								<p>${addresstext }</p>
							</td>
							<td width="20%">
								<a class="tool"> <img src="${path }/common/images/tool.png" width="60%" /> </a>
							</td>
						</tr>
					</table>
					<hr size="1px">
				</li>
			</c:if>
		</ul>
		
		<div id="menu" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#menu" id="menu1">删除该地址</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#menu" id="menu2">修改该地址</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#menu"><b>取消</b></a>
				</li>
			</ul>
		</div>
		
		<a href="${path }/add_position"> <img src="${path}/common/images/add.png" style="position: fixed; bottom: 10px ; right: 10px;"/></a>
	</body>

</html>